<template>
  <div class="dialog">
    <el-dialog :title="editTitle" :visible="isDialogShow" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="deptForm" :model="formData" label-width="120px" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>

        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple">
            <el-option v-for="item in EmployeeSimpleList" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>
        </el-form-item>

        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col>
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartmentsListAPI, getSimplePeoListAPI, addDepartmentsAPI, getDepartDetailAPI, updateDepartDetailAPI } from '@/api/index'
export default {
	name: 'AddDepts',
	props: {
		isDialogShow: {
			type: Boolean
			// required: true
		},
		treeNode: {
			type: Object,
			default: null
		}
	},
	data() {
		// 表单name的验证规则
		const checkNameRepeat = async(rule, value, callback) => {
			const { depts } = await getDepartmentsListAPI()
			let NameRepeat = false
				if (this.formData.id) {
					// 编辑状态下，修改数据允许和当前的名字重复，但不能和  同级下其他的名字  重复
					// #region
					// depts.filter(item=>item.pid = this.formData.pid)——过滤出自己同级下的所有对象数据，包括自己
					// depts.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id)——排除自己
					// #endregion
					NameRepeat = depts.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id).some(item => item.name === value)
					NameRepeat ? callback(new Error('部门名称重复，请重试!')) : callback()

				} else {
					// 新增状态下，名字在同级下查重，不能重复
					NameRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
					NameRepeat ? callback(new Error('部门名称重复，请重试!')) : callback()
				}

		}

		// 表单编码的验证规则
		const checkCodeRepeat = async(rule, value, callback) => {
			const { depts } = await getDepartmentsListAPI()
				let CodeRepeat = false
				if (this.formData.id) {
					// 编辑状态下，修改的数据和之前的this.formData.code允许重复，并且同级下不允许重复
					CodeRepeat = depts.filter(item => item.id !== this.formData.id).some(item => item.code === value)
					CodeRepeat ? callback(new Error('部门编码重复，请重试!')) : callback()
				} else {

					// 新增状态下，Code同级下查重
					CodeRepeat = depts.some(item => item.code === value)
					CodeRepeat ? callback(new Error('部门编码重复，请重试!')) : callback()
				}
		}
		return {
			formData: { // 声明一个对象，用来保存表单的数据
				name: '', // 部门名称
				code: '', // 部门编码
				manager: '', // 部门管理者
				introduce: ''// 部门介绍
			},
			// 弹出层的校验规则
			rules: {
				name: [
					{
						required: true,
						message: '部门名称不能为空',
						trigger: 'blur'// 失去焦点开始校验
					},
					{
						min: 1,
						max: 50,
						message: '1-50个字符之间',
						trigger: 'blur'
					},
					{
						// #region
						/** *
						 *名称的校验规则：   同级部门下，不能出现相同名字的两个部门
						 *1、先拿到当前被点击的《子部门》的数据（父组件中的node）
						 *2、再拿到当前被点击的《父部门》下的数据（调用获取数据的接口，获取所有数据）
						 *3、通过filter()方法筛选，获取到当前被点击的部门 下的  所有子部门，得到一个新的数组
						 *4、在新数组中，使用some()方法，找到名字一样的部门。返回一个布尔值，如果为true，则报错。如果为false，则正常添加
						 * *****/
						// #endregion
						trigger: 'blur',
						validator: checkNameRepeat
					}
				],
				code: [
					{
						required: true,
						message: '部门编码不能为空',
						trigger: 'blur'// 失去焦点开始校验
					},
					{
						min: 1,
						max: 50,
						message: '1-50个字符之间',
						trigger: 'blur'

					},
					{
						// #region
						/** *
						 *编码的校验规则：   部门编码在整个模块中都不允许重复
						 *1、拿到整个数据列表的数据，获得每一个对象 取到id
						 *2、用当前输入的值，跟整个列表 的 对象的id作比较
						 *3、对整个数据列表，使用some()方法，把每一个对象的id和当前输入的值作比较，返回一个布尔值
						 *4、true，则两个值相同，提示报错。否则，正常输入
						 * *****/
						// #endregion
						trigger: 'blur',
						validator: checkCodeRepeat
					}
				],
				manager: [
					{
						required: true,
						message: '部门负责人不能为空',
						trigger: 'blur'// 失去焦点开始校验
					}
				],
				introduce: [
					{
						required: true,
						message: '部门介绍不能为空',
						trigger: 'blur'// 失去焦点开始校验
					},
					{
						min: 1,
						max: 300,
						message: '1-50个字符之间',
						trigger: 'blur'

					}
				]
			},
			EmployeeSimpleList: [] // 声明一个变量，保存部门负责人的数据
		}
	},
	// 使用计算属性，修改弹出层的title标题(新增部门/编辑部门)
	computed: {
		editTitle() {
			return	this.formData.id ? '编辑部门' : '新增部门'
		}
	},
	methods: {

		// 调用获取部门负责人的接口《《《《《——————————————————————————————————————————————
		async	getEmployeeSimple() {
			this.EmployeeSimpleList = await getSimplePeoListAPI()
		},
		// 点击弹出层的确定按钮，提交弹出层的数据，新增部门/修改部门《《《《《——————————————————————————————————————————————
		btnOk() {
			// 1.1手动进行form表单的验证
			this.$refs.deptForm.validate(async isOk => {
				if (isOk) {
					if (this.formData.id) {
						// 表单校验通过，如果formdata有id属性，则说明是编辑状态；点击确定按钮，调用修改部门信息的接口，修改部门信息
						await updateDepartDetailAPI(this.formData)
					} else {
						// 表单校验通过，如果formData的id属性为' ',则说明是新增状态。点击确定按钮，则需要调用新增接口，新增部门
						// 1.1.1验证通过，则调用接口，提交表单数据到后台，进行提交
						await addDepartmentsAPI({ ...this.formData, pid: this.treeNode.id })
					}
					// 1.1.2自定义事件，重新拉取数据
					this.$emit('addDepts')
					// 1.1.3关闭弹出层，关闭的时候，也会自动触发dialog弹出层上的close事件，所以这里不需要单独重置数据了。
					this.$emit('update:isDialogShow', false)
					// 1.1.3刷新列表
				} else {
					// 1.1.2验证不通过，则提示提交错误，重新提交
				}
			})
		},
		// 点击取消按钮，关闭弹出层《《《《《——————————————————————————————————————————————
		btnCancel() {
			// 重置数据，因为resetFields()方法只能重置表单上的数据，非表单数据比如id，是不能重置的。
			this.formData = {
				name: '',
				code: '',
				manager: '',
				introduce: ''
			}
			// (1)关闭弹出层
			this.$emit('update:isDialogShow', false)
			// (2)清除校验数据:resetFields()  ——ElementUI自带的取消Form表单校验的方法
			this.$refs.deptForm.resetFields()
		},
		// 用户在父组件中点击“编辑部门”，请求部门信息的接口要写在弹出层组件中（因为数据要回写给弹出层的）《《《《《—————————————————
		async editDepartDetail(id) {
			const res = await getDepartDetailAPI(id)
			this.formData = res
		}
	}


}
</script>

<style scoped>
::v-deep .el-dialog__header{
	background-color: #5daeff !important;

}
::v-deep .el-dialog__title{
	color: #fff !important;
}
::v-deep .el-dialog__close{
	color: #fff !important;
}

</style>